
<!--vue中不使用template 渲染页面  使用jsx+ render函数-->
<script>
  export default {
    name: 'JsxFunctionComponent',
    functional: true, // jsx 函数式组件 (无状态组件,没有 this, 没有 data，没有methods)

    props: {
      a:{

      },
      b:{

      }
    },
/*
    data(){
      return {
        str:"str"
      }
    },
    methods: {
      divclick() {
        console.log("点我一下")
      }
    },*/
    render(h, context) {
      // 方法声明
      const divclick = (e,a)=>{
        e.stopPropagation()
        console.log("点我一下",a)
      }
      const renders = (ctx)=>{
        let a = ctx-1
        if(a>=0){
          return <div style={{color:"red"}} onClick={(e)=>divclick(e,ctx)}><div>{ctx}</div> <div>{renders(a)}</div></div>
        }
        else{
          // renders(ctx)
        }
      }

      console.log(context.props.a);
      console.log(context.props.b);
      return (
        <div>
          <div>{renders(context.props.a)}</div>
          {context.props.b&& context.props.b.map((item)=>{
            return <div style="color:blue;">{item}</div>
          })}
        </div>)
    },


  }
</script>

<style scoped>
  .sub-el-icon {
    color: currentColor;
    width: 1em;
    height: 1em;
  }
</style>
